<template>
  <div>
    <div class="search">
      <div class="input">
        <i-icon class="search-icon" size="20" type="search" @click="searchGoods()" />
        <input @confirm="searchGoods()" v-model="keyword" placeholder="搜索商品" auto-focus confirm-type="search"/>
        <i-icon class="search-icon" type="delete" size="20" @click="deleteKeyword" />
      </div>
      <ul v-show="keyword !== ''">
        <li @click="searchGoods(item.name)" :key="index" v-for="(item, index) in keywordList">{{item.name}}</li>
      </ul>
    </div>
    <div class="history">
      <div class="header">
        <h1>历史纪记录</h1>
        <i-icon size="26" type="trash" />
      </div>
      <ul>
        <li>男装休闲</li>
        <li>女装休闲</li>
        <li>男裤子</li>
        <li>女裤子</li>
        <li>小米手机配件</li>
        <li>男装休闲</li>
        <li>女装休闲</li>
        <li>男裤子</li>
        <li>女裤子</li>
        <li>小米手机配件</li>
      </ul>
    </div>
    <div class="hot">
      <div class="header">
        <h1>热门搜索</h1>
      </div>
      <ul>
        <li @click="searchGoods(item.keyword)" :class="[{isActive: item.is_hot === 1}]" :key="index" v-for="(item, index) in hotList">{{item.keyword}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {get} from '@/utils'

export default {
  data () {
    return {
      hotList: [],
      keyword: '',
      keywordList: []
    }
  },
  mounted () {
    this.hotSearch()
  },
  methods: {
    async hotSearch () {
      const res = await get('/weapp/search/hotSearch')
      this.hotList = res.hotSearch
    },
    async searchKeyword () {
      if (!this.keyword) return
      const res = await get('/weapp/search/searchGoods', {
        keyword: this.keyword
      })
      this.keywordList = res.keywords
    },
    searchGoods (keyword) {
      if (keyword) {
        this.keyword = keyword
      }
      if (!this.keyword) {
        return
      }
      wx.navigateTo({
        url: `/pages/filters/main?type=${this.keyword}`
      })
    },
    deleteKeyword () {
      this.keyword = ''
    },
    debounce (fun, delay) {
      clearTimeout(fun.time)
      fun.time = setTimeout(() => {
        fun()
      }, delay)
    }
  },
  watch: {
    keyword () {
      this.debounce(this.searchKeyword, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.search{
  position: relative;
  ul{
    position:absolute;
    height: 100vh;
    width: calc(100vw - 80rpx);
    background: #fff;
    padding: 0 40rpx;
    li{
      width: 100%;
      font-size: 28rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #d6d6d6;
    }
  }
}
.input{
  height: 80rpx;
  margin: 20rpx;
  background: #f3f5f7;
  border-radius: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  .search-icon{
    width: 40rpx;
    padding: 0 30rpx;
  }
  input{
    flex: 1;
  }
}
.history, .hot{
  margin: 0 25rpx;
  .header{
    display: flex;
    justify-content: space-between;
    align-items:center;
    h1{
      font-size: 28rpx;
      color: #7c7c7c;
      padding:20rpx 0;
    }
  }
  li{
    height: 50rpx;
    line-height: 50rpx;
    max-width: 300rpx;
    padding: 5rpx 15rpx ;
    margin-right: 25rpx;
    margin-bottom: 25rpx;
    font-size: 28rpx;
    border: 1px solid #7c7c7c;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.isActive{
  border-color: #b4282d !important;
  color: #b4282d;
}
</style>
